$first_row_height: 160px;
$title_height: 42px;
$notice_height: 34px;
.notice-bar {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
	background: #fff;
	height: $notice_height;
	padding: 0 12px;
	box-sizing: border-box;
	border-radius: 4px;
	.notice-bar-label {
		flex-shrink: 0;
		font-size: 14px;
		.el-icon-bell {
			font-weight: 500;
		}
	}
}
.workbench-container {
	width: 100%;
	height: calc(100vh - 96px);
	background: #f8f8f9;
	padding: 16px;
	.head-box-item {
		height: $first_row_height;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
		margin-bottom: 16px;
		.head-item-content {
			height: calc(100% - #{$title_height});
			.head-item-content-user-msg-bar {
				width: 100%;
				height: 100%;
				padding: 0 16px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.head-item-content-user-msg {
					padding-left: 12px;
					.head-item-content-user-msg-name {
						font-size: 16px;
						font-weight: 700;
						display: flex;
						align-items: center;
						margin-bottom: 6px;
						.head-item-content-user-msg-sex {
							width: 20px;
							height: 20px;
							font-size: 14px;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-left: 10px;
						}
						.female {
							color: rgb(190, 107, 224);
							background: #fdf0ff;
						}
						.male {
							color: #1890ff;
							background: #e8f4ff;
						}
					}
					.head-item-content-user-msg-schedule {
						font-size: 14px;
					}
					.head-item-content-user-msg-dept {
						font-size: 14px;
					}
				}
			}
			.head-item-content-item {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				border-right: solid 1px #eee;
				padding: 10px 16px;
				.head-item-content-item-title {
					font-size: 14px;
				}
				.head-item-content-item-today-val-bar {
					margin: 10px 0;
					font-weight: 700;
					display: flex;
					align-items: flex-end;
					.head-item-content-item-today-unit {
						font-size: 14px;
						margin-right: 2px;
					}
					.head-item-content-item-today-val {
						font-size: 19px;
						letter-spacing: 1px;
					}
				}
				.head-item-content-item-history-bar {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #808695;
					.head-item-content-item-history-bar-label {
						font-size: 12px;

					}
					.head-item-content-item-history-bar-val {
						font-size: 12px;
					}
				}
			}

		}
		.head-item-content .head-item-content-item:last-child {
			border-right: none;
		}
	}
	.workbench-card-item-title {
		width: 100%;
		height: $title_height;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1px #eee;
		padding: 0 14px;
		font-size: 16px;
		box-sizing: border-box;
		.set-shortcut-keys-icon {
			font-size: 20px;
			cursor: pointer;
		}
		.set-shortcut-keys-icon:hover {
			color: #2d8cf0;
		}
		.workbench-card-item-title-icon {
			width: 30px;
			height: 30px;
			color: #3e95f1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: rgba(45,140,240,.2);
			box-sizing: border-box;
			font-size: 20px;
			margin-right: 8px;
		}
	}

	.workbench-article-box {
		height: calc(100% - #{$first_row_height} - #{$notice_height} - 4px);
		display: flex;
		flex-wrap: wrap;
		.workbench-article-box-out-item {
			height: calc(50% - 16px);
			margin-bottom: 16px;
			box-sizing: border-box;
			.second-row-inner-item {
				height: 100%;
				background: #fff;
				border-radius: 10px;
				.second-row-item-content {
					width: 100%;
					height: calc(100% - #{$title_height});
					padding: 10px 14px;
					box-sizing: border-box;
					overflow: auto;
					.notice-item {
						padding: 4px 12px;
						border-bottom: solid 1px #e8eaec;
						.notice-item-circle {
							width: 4px;
							height: 4px;
							flex-shrink: 0;
							border-radius: 50%;
							background: #2b85e4;
							margin-right: 10px;
						}
						.notice-item-title {
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 13px;
						}
						.notice-item-time {
							font-size: 12px;
							color: #c5c8ce;
							margin: 5px 0 5px 0;
						}
					}
				}
			}
		}
	}
}
